import { useMemo } from 'react';
import './index.less';

import { skills } from '../../config';

const SkillInfo = () => {
  const skillEls = useMemo(() => {
    const els: JSX.Element[] = [];
    skills.forEach((item, index) => {
      els.push(
        <div key={index} className="skill-item">
          <div className="circle-container">
            <div className="circle"></div>
          </div>
          {/* <div className="text">{item}</div> */}
          <div className='text-container'>
            {item.map((subItem, index) => (
              <span key={index} className="text" style={{ fontWeight: subItem.fontWeight, color: subItem.color }}>
                {subItem.text}
              </span>
            ))}
          </div>
        </div>
      );
    });
    return els;
  }, []);

  return (
    <div className="skill">
      <div className="skill-title">
        <div className="title">相关技能</div>
        <div className="en">TECH STACK</div>
      </div>
      <div className="skill-container">{skillEls}</div>
    </div>
  );
};
export default SkillInfo;
